@charset "UTF-8";
html, body, div, p, span, label, img, a, ol, ul, dl, dt, dd, li, table, tr, td, th, tbody, thead, tfoot, form, fieldset, legent, h1, h2, h3, h4, h5, h6, strong, b, em, blockquote, cite, pre, code, hr, br, input, button, textarea,article, aside, details, figcaption, figure, footer, header, group, menu, nav, section { padding:0px; margin:0px; }
a { border:0 none; cursor:pointer; }
ol, ul { list-style-type:none; }
em,i{ font-style:normal;}
a:link, a:visited { text-decoration:none; }
.clearfix:after{clear:both; content:""; display:block; height:0; visibility:hidden; line-height:0;}
.clearfix { zoom:1; }
.clear { clear:both; height:0; width:0; display:block; visibility:hidden; overflow:hidden;}
.left { float:left; display:inline; }
.right { float:right; display:inline; }
.block{ display:block;}
.hidden{ display:none;}
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; }

body{ font-family:"Microsoft yahei", "SimHei"; color:#fff;}
#wrap{ position:relative; width:100%; min-width:1014px; /*min-height:768px;*/ height:768px; overflow:hidden;}
#whole{ width:910px; height:auto; margin:0 auto; position:relative; z-index:2;}
#header{ padding-top:25px;}

.votewrap{ position:relative; padding:20px 30px; height:505px;}
.stit{ width:670px; color:#373737; /*font-size:32px;*/ font-size: 26px; padding-bottom:10px;}
.tips{ color:#585858; font-size:18px;}
.sjoin-num{ position:absolute; top:26px; right:68px; color:#333; font-size:18px;}
.sjoin-num em{ font-size:28px;}
.votebox{ color:#555;}
.row1{ padding-left:50px;}
.two-row{ padding-left:40px;}
.three-row,.three-row-five{ padding-left:20px;}
.srow{ float:left;}
.row1 .srow{ width:650px; margin-right:0;}
.two-row .srow{ width:280px; margin-right:120px;}
.three-row .srow,.three-row-five .srow{ width:180px; margin-right:95px;}
.row1 .slist li{ margin-top:22px;}
.two-row .slist li,.three-row-five .slist li{ margin-top:22px;}
.three-row .slist li{ margin-top:13px;}
.slist{}
.slist li{ width:100%;}
.slist li:hover{ cursor:pointer;}
.votenum{ float:left; font-size:14px; display:inline-block; width:28px; height:30px; line-height:30px;}
.example{ position:relative; margin-left:28px;}
.stopic{ display:block; font-size:14px; height:30px; line-height:30px; overflow:hidden;}
.slist li:hover .stopic,.slist li:hover .votenum{ color:#0f7db5;}
.progress{ height:22px; width:100%; background-color:#fff; border-radius:5px; -webkit-box-shadow:inset 2px 2px 0 #e6e6e6,inset -2px -2px 0px #e6e6e6; box-shadow:inset 2px 2px 0 #e6e6e6,inset -2px -2px 0px #e6e6e6;}
.progress-bar{float:left; width:0; height:100%; font-size:16px; line-height:22px; color:#858585; border-radius:5px; background-color:#ffd55a; -webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15); -webkit-transition:width .6s ease; transition:width .6s ease;}
.progress-bar-first{ background-color:#f56863;}
.progress-bar-second{ background-color:#35c500;}
.progress-bar-third{ background-color:#0091da;}
.tips2{ padding-top:210px; line-height:49px; text-align:center; font-size:37px; font-weight:bold;}
.btn-wrap{ text-align:center; padding-top:30px;}
.btn-wrap a{ display:inline-block; width:175px; height:55px; line-height:55px; text-align:center; color:#fff; font-size:24px;}


@media screen and ( max-device-height:720px){
  #wrap{ height:720px;}
  #footer{ margin-top:-17px;}
}

@media screen and ( min-device-height:800px) {
  #wrap{ height:800px;}
}

@media screen and ( min-device-height:900px) {
  #wrap{ height:900px;}
}

@media screen and ( min-device-height:1080px) {
  #wrap{ height:1080px;}
}

@media screen and ( min-device-height:1200px) {
  #wrap{ height:1200px;}
}




.votewrap{ height:auto; padding:70px 45px 20px; position:relative;}
.btn-code,.btn-code:hover{ display:block; background:url(icon-code.png?v=2909) no-repeat; width:68px; height:68px; position:absolute; right:16px; top:22px;    background-size: 100% 100%;}
.stit{ color:#fff;}
.sjoin-num{ right: 60px;top: 40px;color: #fff;}
.tips{ color:#fff; font-size:16px; padding:0 25px; margin-bottom:20px;}

.row1{ color:#fff; padding-left:40px; }
.row1 .srow{ width:770px;}
.row1 .slist li{ float:left; width:70px; height:auto;  margin:0 auto; position:relative;}
.row1 .votenum{ display:none;}
.row1 .example{ margin:0 auto; padding-bottom:30px;}
.row1 .progress svg path{ transition: all 0.6s ease; }
.row1 .progress{ width:42px; height:256px; padding:0; background:none; border:none; box-shadow:none; position:relative; margin:0 auto;}
.row1 .progress:after{ content:''; width:42px; height:256px; /*background:url(li-bg.png) center bottom no-repeat;*/ position:absolute; left:0; top:0; z-index:1;}
.row1 .progress-bar{ width:100%; height:20%; border-radius:6px; position:absolute; left:0; bottom:0;transition: all .6s ease;}
.row1 .progress-bar span{ position:absolute; left:0; bottom:100%; width:100%; text-align:center; color:#fff; line-height:25px; text-shadow:2px 2px 5px rgba(0,0,0,0.2); font-size: 14px}
.row1 .progress-bar-0{ background:#d3f750;}
.row1 .progress-bar-1{ background:#bbc5e2;}
.row1 .progress-bar-2{ background:#fb7ab7;}
.row1 .progress-bar-3{ background:#ffe46a;}
.row1 .progress-bar-4{ background:#f3eaad;}
.row1 .progress-bar-5{ background:#8accfa;}
.row1 .textp{
  position:absolute; left:50%; bottom:280px; margin-left:-25px; min-width:49px; padding:13px 0 24px; text-align:center; font-size:16px; color:#ff4300;
}
.row1 .text-0{ color:#d3f750;}
.row1 .text-1{ color:#bbc5e2;}
.row1 .text-2{ color:#fb7ab7;}
.row1 .text-3{ color:#ffe46a;}
.row1 .text-4{ color:#f3eaad;}
.row1 .text-5{ color:#8accfa;}
.row1 .words-tips{ display:none;}

.row1 .slist li .ava{ width:66px; height:66px; background:#fff; border:2px solid #fff; border-radius:70px; margin:0 auto;}
.row1 .slist li .ava img{ width:66px; height:66px; border-radius:66px;}
.row1 .stopic{ white-space: nowrap;position:absolute; left:50%; top:260px; -webkit-transform:translateX(-50%); width:120px; text-align:center; height:40px; line-height:20px;  }
.row1 .stopic2{ font-size: 14px;white-space: nowrap;position:absolute; left:50%; top:280px; -webkit-transform:translateX(-50%); width:75px; text-align:center; height:20px; line-height:20px; overflow:hidden; } 
.slist li:hover .stopic,.slist li:hover .votenum{ color:#fff;}

.row1 .swiper-button-next, 
.row1 .swiper-button-prev,
.simg .swiper-button-next, 
.simg .swiper-button-prev{ width:42px; height:65px; background-image:url(btns.png); background-repeat:no-repeat; background-size:auto 65px;}
.row1 .swiper-button-next,
.simg .swiper-button-next{ background-position:right top; right:25px;}
.row1 .swiper-button-prev,
.simg .swiper-button-prev{ background-position:left top; left:25px;}

.simg .swiper-button-next{ right:10px;}
.simg .swiper-button-prev{ left:10px;}



/*二维码弹层*/
.pop-bg{ position:fixed; left:0; top:0; z-index:100; width:100%; height:100%; background:none;}
.pop-code{ width:580px; height:auto; position:absolute; left:50%; margin-left:-290px; top:50%; margin-top:-320px;background: #fff}
.pop-code img{    margin-left: 10px; width:520px; height:520px; border-radius:6px; border:20px solid #fff;}
.pop-code p{ font-size:43px; line-height:50px; text-align:center; letter-spacing: 10px;padding: 10px 0 10px;color: #000}
.msgBigIn{ -webkit-animation:msgBigIn 0.5s ease forwards;}
@keyframes msgBigIn {
  0% {
	-webkit-transform-origin:0 0 0;
    -webkit-transform:scale3d(0,0,0);
  }
  100% {
	-webkit-transform-origin:0 0 0;
    -webkit-transform:scale3d(1,1,1);
  }
}

@media screen and (min-height:900px){
.fl-layer{  margin-bottom:25px;}
}


.container1 .top {
    height: 80px;
    margin-bottom: 15px;
    background: url('topbg.png');
    background-size: 100% 100%;
    clear: both;
}

.container1 .top>div {
    float: left;
    height: 100%;
}

.container1 .top .left {
    width: 200px;
}



.container1 .top .center {
    width: 700px;
    text-align: center;
    overflow: hidden;
}

.container1 .top .center span.title {
    line-height: 80px;
    color: #fff604;
    font-size: 36px;
    font-weight: bold;
}

.container1 .top .right {
    width: 200px;
    text-align: right;

}

.container1 .top .right .tipword {
    display: inline-block;
    width: 80px;
    height: 100%;
    text-align: center;
    vertical-align: top;
    margin-top: 7px;
}

.container1 .top .right .tipword .num {
    font-weight: bold;
    font-size: 25px;
    color: white;
}

.container1 .top .right .tipword .plus {
    font-size: 17px;
    color: white;
}

.container1 .top .right .qrcode {
    width: 65px;
    height: 65px;
    margin-top: 8px;
    margin-left: 28px;
    cursor: pointer;
}